<template>
    <div class="m-GenBox">
        <div class="u-flex_row">
            <div class="u-cardBox third">
                <div class="title">矩形</div>
                <div class="cardMain">
                    <u-radarEchart 
                        :keyId="'third1'" 
                        :legend="legendList1" :list="list1">
                    </u-radarEchart>
                </div>
            </div>
        </div>
        <div class="u-flex_row">
            <div class="u-cardBox third">
                <div class="title">圆形 </div>
                <div class="cardMain">
                    <u-radarEchart 
                        :keyId="'third2'" 
                        :legend="legendList1" :list="list1" :shapeType="'circle'">
                    </u-radarEchart>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Radarp',
    data(){
        return{
            legendList1:[
                {name:'小学',color:'#fdb628'},
                {name:'初中',color:'#6374f7'},
            ],
            list1:[
                {name:"学生特质",radarMax:5,value:[4,4]},
                {name:"教师行为",radarMax:5,value:[2.5,3]},
                {name:"领导风格",radarMax:5,value:[2,4.9]},
            ],
        }
    },
    created(){
        this.getInit()
    },
    mounted(){
    },
    methods:{
        getInit(){
            
        },
        getChart(){

        },

    },
}
</script>
<style lang="scss" scoped>
.u-cardBox {
    &.first{
        width: 504px; height: 440px;
        .group{
            display: flex;
            justify-content: space-between;
            text-align: center;
        }
        .progressBox{
            width: 33.33%;
            .name{
                font-size: 16px; color: #747e93;
                margin-top: 22px;
            }
        }
    }
    &.second{
        flex: 1; height: 440px;
        display: flex;
        flex-direction: column;
        margin-left: 24px;
        .cardMain{
            width: 100%;
            flex: 1;
        }
    }
    &.third{
        flex: 1; height: 480px;
        display: flex;
        flex-direction: column;
        .cardMain{
            width: 100%;
            flex: 1;
        }
    }
}
</style>
